{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap/bootstrap.min.css' %}">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap-icons/font/bootstrap-icons.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'grading/css/custom.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>评分系统调试页面</h2>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>DOM元素检查</h5>
                </div>
                <div class="card-body">
                    <div id="dom-check-results">
                        <p>正在检查DOM元素...</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>JavaScript功能测试</h5>
                </div>
                <div class="card-body">
                    <div id="js-test-results">
                        <p>正在测试JavaScript功能...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>评分系统界面</h5>
                </div>
                <div class="card-body">
                    <!-- 评分按钮组 -->
                    <div class="d-flex align-items-center">
                        <!-- 评分方式切换 -->
                        <div class="btn-group me-3" role="group" aria-label="评分方式">
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn active" data-mode="letter">
                                字母等级
                            </button>
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn" data-mode="text">
                                文字等级
                            </button>
                        </div>

                        <!-- 字母等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="字母评分选项" id="letter-grade-buttons">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="A">A</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="B">B</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="C">C</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="D">D</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="E">E</button>
                        </div>

                        <!-- 文字等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="文字评分选项" id="text-grade-buttons" style="display: none;">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="优秀">优秀</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="良好">良好</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="中等">中等</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="及格">及格</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="不及格">不及格</button>
                        </div>

                        <button type="button" class="btn btn-primary me-2" id="add-grade-to-file">
                            确定
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="cancel-grade">
                            撤销
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>控制台输出</h5>
                </div>
                <div class="card-body">
                    <div id="console-output" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 10px; height: 200px; overflow-y: auto; font-family: monospace; font-size: 12px;">
                        <p>控制台输出将显示在这里...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- jQuery -->
<script src="{% static 'grading/vendor/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="{% static 'grading/vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>
<!-- 自定义脚本 -->
<script src="{% static 'grading/js/grading.js' %}"></script>

<script>
// 重写console.log来捕获输出
const originalLog = console.log;
const originalError = console.error;
const consoleOutput = document.getElementById('console-output');

function addToConsoleOutput(message, type = 'log') {
    const timestamp = new Date().toLocaleTimeString();
    const color = type === 'error' ? 'red' : 'black';
    consoleOutput.innerHTML += `<div style="color: ${color};">[${timestamp}] ${message}</div>`;
    consoleOutput.scrollTop = consoleOutput.scrollHeight;
}

console.log = function(...args) {
    originalLog.apply(console, args);
    addToConsoleOutput(args.join(' '));
};

console.error = function(...args) {
    originalError.apply(console, args);
    addToConsoleOutput(args.join(' '), 'error');
};

// DOM元素检查
function checkDOMElements() {
    const results = document.getElementById('dom-check-results');
    let html = '<ul>';

    // 检查评分方式按钮
    const gradeModeButtons = document.querySelectorAll('.grade-mode-btn');
    html += `<li>评分方式按钮: ${gradeModeButtons.length} 个</li>`;
    gradeModeButtons.forEach((btn, index) => {
        html += `<li>  - 按钮 ${index + 1}: "${btn.textContent.trim()}" (data-mode: "${btn.dataset.mode}")</li>`;
    });

    // 检查字母评分按钮组
    const letterButtons = document.getElementById('letter-grade-buttons');
    html += `<li>字母评分按钮组: ${letterButtons ? '存在' : '不存在'}</li>`;
    if (letterButtons) {
        html += `<li>  - 显示状态: ${letterButtons.style.display}</li>`;
        html += `<li>  - 可见性: ${letterButtons.offsetParent !== null ? '可见' : '不可见'}</li>`;
    }

    // 检查文字评分按钮组
    const textButtons = document.getElementById('text-grade-buttons');
    html += `<li>文字评分按钮组: ${textButtons ? '存在' : '不存在'}</li>`;
    if (textButtons) {
        html += `<li>  - 显示状态: ${textButtons.style.display}</li>`;
        html += `<li>  - 可见性: ${textButtons.offsetParent !== null ? '可见' : '不可见'}</li>`;
    }

    // 检查评分按钮
    const gradeButtons = document.querySelectorAll('.grade-button');
    html += `<li>评分按钮: ${gradeButtons.length} 个</li>`;
    gradeButtons.forEach((btn, index) => {
        html += `<li>  - 按钮 ${index + 1}: "${btn.textContent.trim()}" (data-grade: "${btn.dataset.grade}")</li>`;
    });

    html += '</ul>';
    results.innerHTML = html;
}

// JavaScript功能测试
function testJSFunctions() {
    const results = document.getElementById('js-test-results');
    let html = '<ul>';

    // 测试全局变量
    html += `<li>selectedGrade: ${typeof selectedGrade !== 'undefined' ? selectedGrade : '未定义'}</li>`;
    html += `<li>gradeMode: ${typeof gradeMode !== 'undefined' ? gradeMode : '未定义'}</li>`;

    // 测试函数是否存在
    html += `<li>switchGradeMode函数: ${typeof switchGradeMode === 'function' ? '存在' : '不存在'}</li>`;
    html += `<li>setGradeButtonState函数: ${typeof setGradeButtonState === 'function' ? '存在' : '不存在'}</li>`;

    // 测试jQuery
    html += `<li>jQuery版本: ${typeof $ !== 'undefined' ? $.fn.jquery : '未加载'}</li>`;

    html += '</ul>';
    results.innerHTML = html;
}

// 页面加载完成后执行检查
$(document).ready(function() {
    console.log('=== 调试页面加载完成 ===');

    // 延迟执行检查，确保所有元素都已加载
    setTimeout(function() {
        checkDOMElements();
        testJSFunctions();

        // 测试评分方式切换
        console.log('测试评分方式切换功能...');
        if (typeof switchGradeMode === 'function') {
            console.log('切换到文字评分方式');
            switchGradeMode('text');

            setTimeout(function() {
                console.log('切换后状态检查:');
                console.log('- 字母评分按钮组显示状态:', $('#letter-grade-buttons').is(':visible'));
                console.log('- 文字评分按钮组显示状态:', $('#text-grade-buttons').is(':visible'));
                console.log('- 当前评分:', selectedGrade);
                console.log('- 评分方式:', gradeMode);
            }, 100);
        }
    }, 500);
});
</script>
{% endblock %}
